<template>
  <div id="salvenote">
    <div>
      <span class="title-item">更换列表分页数据</span>
    </div>
    <a-form-model layout="inline" :model="page" :colon="false">
      <a-form-model-item label="排口查询">
        <a-input v-model="page.equipmentName" placeholder="请输入排口" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="公司查询">
        <a-input v-model="page.taskName" placeholder="请输入公司名" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="服务部查询">
        <a-select placeholder="请选择服务部" v-model="page.taskArea" show-search :filter-option="filterOption" allowClear style="width: 190px">
          <a-select-option :value="v.id" v-for="v in selectData" :key="v.id">{{ v.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSubmit">查询</a-button>
      </a-form-model-item>

    </a-form-model>
    <div class="tableclass">
      <my-table
        style="min-height: 94%"
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :rowKey="(record) => record.id"
      >
        <span slot="action" slot-scope="text, action">
          <a class="solvebtn" @click="showModal(action)">详情</a>
        </span>
         <template slot="pictureAssociation" class="solve-img" slot-scope="pictureAssociation">
          <div v-viewer>
            <img class="byimg" :src="img.picId" data-first-index="0" :data-secondIndex="indexs" v-for="(img, indexs) in  pictureAssociation" :key="indexs" alt/>
          </div>
        </template>
        <template slot="pictureAssociationOne" class="solve-img" slot-scope="pictureAssociationOne">
          <div v-viewer>
            <img class="byimg" :src="img.picId" data-first-index="0" :data-secondIndex="indexs" v-for="(img, indexs) in  pictureAssociationOne" :key="indexs" alt/>
          </div>
        </template>
      </my-table>
      <div class="bottompage">
        <a-pagination :show-total="(total) => `共 ${total} 条记录`" :item-render="itemRender" v-model="page.current" :total="total" :defaultPageSize="page.size" @change="pagechangeFn" show-less-items/>
      </div>
      <!-- 详情弹出框 -->
      <a-modal
        width="80%"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @cancel="handleCancel"
        :footer="null"
      >
        <template v-if="detail.start == 1">
          <div class="table-all" v-if="visible">
            <a-row>
              <a-col :span="24" class="shuju">
                <div @click="Yreplace"  style="width:100px;margin-left:90%;cursor: pointer;">
                  <a-icon type="cloud-download" style="color: #fff" />
                  导出数据
                </div>
              </a-col>
              <a-col :span="24" class="bordertop">标准气体更换记录表</a-col>
              <a-col :span="3" class="borderall"> 安装地点 </a-col>
              <a-col :span="9" class="borderallone"> {{smokerData.taskEquipmentInfoPoList.monitorName}}</a-col>
              <a-col :span="4" class="borderallone"> 维护管理单位 </a-col>
              <a-col :span="8" class="borderallone">南京杰思尔环保智能科技有限公司 </a-col>
              <a-col :span="3" class="borderall"> 序号 </a-col>
              <a-col :span="3" class="borderallone"> 更换日期 </a-col>
              <a-col :span="3" class="borderallone"> 标准物质名称 </a-col>
              <a-col :span="3" class="borderallone"> 气体浓度 </a-col>
              <a-col :span="2" class="borderallone"> 单位 </a-col>
              <a-col :span="2" class="borderallone"> 数量 </a-col>
              <a-col :span="3" class="borderallone"> 供应商 </a-col>
              <a-col :span="3" class="borderallone"> 有效期 </a-col>
              <a-col :span="2" class="borderallone"> 维护保养人 </a-col>
              <a-col v-for="(c, s) in smokerData.smokeReplacePo" :key="s">
                <a-col :span="3" class="borderall">{{ s + 1 }}</a-col>
                <a-col :span="3" class="borderallone">
                  {{
                    moment(parseInt(c.replaceTime)).format("YYYY/MM/DD")
                  }}</a-col
                >
                <a-col :span="3" class="borderallone">
                  {{ c.consumablesName }}</a-col
                >
                <a-col :span="3" class="borderallone">
                  {{ c.gasConcentration }}</a-col
                >
                <a-col :span="2" class="borderallone"> {{ c.unit }}</a-col>
                <a-col :span="2" class="borderallone"> {{ c.amount }}</a-col>
                <a-col :span="3" class="borderallone"> {{ c.supplier }}</a-col>
                <a-col :span="3" class="borderallone">
                  {{ moment(parseInt(c.validity)).format("YYYY/MM/DD") }}</a-col
                >
                <a-col :span="2" class="borderallone">
                  {{ c.maintenancePersonnel }}</a-col
                >
              </a-col>
            </a-row>
            <a-col class="border-img">
              <a-col :span="4" class="border-img1">更换过程</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in smokerData.pictureAssociation"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
            <a-col class="border-img" v-if="smokerData.pictureAssociationOne.length>0">
              <a-col :span="4" class="border-img1">更换记录</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in smokerData.pictureAssociationOne"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
          </div>
        </template>
        <template v-if="detail.start == 2">
          <div class="table-all" v-if="visible">
            <a-row :span="24"  class="shuju">
              <div @click="Wreplace"  style="width:100px;margin-left:90%;cursor: pointer;">
                <a-icon type="cloud-download" style="color: #fff" />
                导出数据
              </div>
            </a-row>
            <a-row>
              <a-col :span="24" class="bordertop">易耗品更换记录表</a-col>
              <a-col :span="4" class="borderall"> 安装地点 </a-col>
              <a-col :span="8" class="borderallone">{{waterData.taskEquipmentInfoPoList.monitorName}} </a-col>
              <a-col :span="4" class="borderallone"> 维护管理单位 </a-col>
              <a-col :span="8" class="borderallone">南京杰思尔环保智能科技有限公司 </a-col>
              <a-col :span="4" class="borderall"> 序号 </a-col>
              <a-col :span="4" class="borderallone"> 更换日期 </a-col>
              <a-col :span="4" class="borderallone"> 易耗品名称 </a-col>
              <a-col :span="4" class="borderallone"> 规格型号 </a-col>
              <a-col :span="1" class="borderallone"> 单位 </a-col>
              <a-col :span="1" class="borderallone"> 数量 </a-col>
              <a-col :span="3" class="borderallone"> 更换原因说明</a-col>
              <a-col :span="3" class="borderallone"> 维护保养人 </a-col>

              <a-col v-for="(c, s) in waterData.waterReplacePo" :key="s">
                <a-col :span="4" class="borderall"> {{ s + 1 }} </a-col>
                <a-col :span="4" class="borderallone"
                  >{{ moment(parseInt(c.replaceTime)).format("YYYY/MM/DD") }}
                </a-col>
                <a-col :span="4" class="borderallone">
                  {{ c.consumablesName }}</a-col
                >
                <a-col :span="4" class="borderallone">
                  {{ c.specification }}</a-col
                >
                <a-col :span="1" class="borderallone"> {{ c.unit }}</a-col>
                <a-col :span="1" class="borderallone"> {{ c.amount }}</a-col>
                <a-col :span="3" class="borderallone"> {{ c.note }}</a-col>
                <a-col :span="3" class="borderallone">
                  {{ c.maintenancePersonnel }}</a-col
                >
              </a-col>
              <a-col :span="3" class="borderall">维护保养人</a-col>
              <a-col :span="3" class="borderallone">{{
                waterData.reviewer
              }}</a-col>
              <a-col :span="3" class="borderallone">时间</a-col>
              <a-col :span="3" class="borderallone">{{ moment(parseInt(waterData.reviewerTime)).format("YYYY/MM/DD") }}</a-col>
              <a-col :span="3" class="borderallone">审核人</a-col>
              <a-col :span="3" class="borderallone"></a-col>
              <a-col :span="3" class="borderallone">时间</a-col>
              <a-col :span="3" class="borderallone"></a-col>
              <a-col :span="24" class="borderall"
                >注：更换易耗品时应及时记录，每半年汇总存档</a-col
              >
            </a-row>
            <a-col class="border-img">
              <a-col :span="4" class="border-img1">更换过程</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in waterData.pictureAssociation"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
            <a-col class="border-img" v-if="waterData.pictureAssociationOne.length>0">
              <a-col :span="4" class="border-img1">更换记录</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in waterData.pictureAssociationOne"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
          </div>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { log } from "video.js";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
export default {
  data() {
    return {
      listData: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },

        {
          title: "公司名称",
          dataIndex: "taskName",
           width: "17%",
          align: "center",
        },
        {
          title: "排口名称",
          dataIndex: "equipmentName",
           width: "12%",
          align: "center",
        },
        {
          title: "任务区域",
          dataIndex: "taskArea",
          width: "10%",
          align: "center",
        },
        {
          title: "更换时间",
          dataIndex: "time",
          align: "center",
        },
        {
          title: "更换人",
          dataIndex: "executor",
          align: "center",
        },
        {
          title: "更换过程",
          dataIndex: "pictureAssociation",
           width: "10%",
          scopedSlots: { customRender: "pictureAssociation" },
          align: "center",
        },
        {
          title: "更换记录",
          dataIndex: "pictureAssociationOne",
           width: "10%",
          scopedSlots: { customRender: "pictureAssociationOne" },
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "10%",
          align: "center",
        },
      ],
      data: [],
      title: "",
      moment,
      page: {
        current: 1,
        size: 10,
        equipmentName: "",
        taskName: "",
        taskArea: undefined,
      },
      total: 0,
      selectData: [], //  下拉筛选数据
      dept: {
        current: 1, //获取人员数据
        size: 200,
        roleId: "",
      },
      deptList: [], //用户ID
      //详情弹出框
      visible: false,
      confirmLoading: false,
      //表格数据
      list: [],
      //详情数据
      detail: [],
      smokerData: "",
      waterData: "",
    };
  },

  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    onSubmit() {
      this.getdata();
    },
    //水质更换
    Wreplace() {
      if (this.waterData != "") {
        this.id = this.waterData.id;
        this.$api.waterReplace(this.id).then((res) => {
          if (res.data.data.indexOf("数据错误，请联系管理员！") >= 0) {
            this.$message.info("暂无数据");
          } else {
            window.open(res.data.data);
          }
        });
      } else {
        this.$message.info("暂无数据");
      }
      this.getdata(this.detail);
    },
    //烟气更换
    Yreplace() {
      if (this.smokerData != "") {
        this.id = this.smokerData.id;
        this.$api.smokeReplace(this.id).then((res) => {
          if (res.data.data.indexOf("数据错误，请联系管理员！") >= 0) {
            this.$message.info("暂无数据");
          } else {
            window.open(res.data.data);
          }
        });
      } else {
        this.$message.info("暂无数据");
      }
      this.getdata(this.detail);
    },
    //获取ID用户名
    getDept() {
      this.$api.userFindByPage(this.dept).then((res) => {
        console.log(res);
        this.deptList = res.data.data;
      });
    },
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //弹出框方法,查看详情
    showModal(data) {
      this.detail = data;
      if (data.start == 1) {
        this.$api.smokeReplaceListDetails(this.detail.id).then((res) => {
          this.smokerData = res.data.data;
          this.visible = true;
        });
      }
      if (data.start == 2) {
        this.$api.waterReplaceListDetails(this.detail.id).then((res) => {
          this.waterData = res.data.data;
          this.visible = true;
        });
      }
    },
    //关闭弹窗
    handleCancel(e) {
      console.log("点击关闭按钮");
      this.visible = false;
    },
    //获取数据
    getdata() {
      var that = this;
      this.$api.listFindReplaceListByPage(this.page).then((res) => {
        if(res.data.code == 0){
          var result = res.data.data;
        for (var i = 0; i < result.length; i++) {
          if (result[i].equipmentCount == null) {
            result[i].equipmentCount = "";
          }
          if (result[i].equipmentType == null) {
            result[i].equipmentType = "";
          }
        }
        this.data = res.data.data;
        this.data.forEach((item) => {
          if (item.time === null) {
            item.time = "";
          } else {
            item.time = moment
              .unix(item.time / 1000)
              .format("YYYY/MM/DD HH:mm:ss");
          }
        });
        that.data = result;
        this.total = res.data.total;
        }
      });
    },
  },
  mounted() {
    this.getdata();
    this.$api.areaFindPoint(3).then((res) => {
      if (res.data.code == 0) {
        this.selectData = res.data.data;
      }
    });
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.byimg {
  width: 30px;
  height: 20px;
  margin-left: 10px;
}
::v-deep .solve-img {
  height: 26px;
}
::v-deep .solve-img img {
  width: 24px;
  height: 20px;
  margin-right: 5px;
}
.solve-img {
  display: inline-block;
  justify-content: space-evenly;
}
::v-deep .ant-modal-content {
  height: 700px !important;
  overflow-y: scroll;
}
::v-deep .ant-modal-content::-webkit-scrollbar {
  /*隐藏滚轮*/
  width: 0 !important;
}
.shuju {
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  height: 60px;
  text-align: right;
  line-height: 60px;
}
.img {
  width: 150px;
  height: 100px;
  padding: 20px;
}
.border-img1 {
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  text-align: center;
}
.border-img {
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  line-height: 160px;
  height: 160px;
}
.scroll-bar {
  font-size: 24px;
  color: #4ccbad;
}
.monitorCalibrationRecordPo {
  font-size: 18px;
  text-align: center;
  color: #9fb043;
}
.listcentent {
  font-size: 16px;
  text-align: center;
  color: #bebebe;
  line-height: 30px;
  height: 30px;
}
.ant-row-flex-end {
  margin-top: 30px;
}
#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #1890ff;
}

::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
}
.bottompage {
  margin-top: 12px;
  float: right;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}

.ant-form-item {
  color: #bebebe;
  margin-bottom: 10px;
}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}
.table-all {
  width: 100%;
}
.borderallq {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  height: 140px;
}
.borderall {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 28px;
  text-align: center;
  line-height: 28px;
}
.borderallone {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 28px;
  text-align: center;
  line-height: 28px;
}
.borderalltwo {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}
.borderalltwos {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}
.borderallthree {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}
.borderallfour {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  height: 30px;
}
.borderallfive {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  white-space: pre-wrap;
}
.borderallsix {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 122px;
  text-align: center;
  line-height: 94px;
}
.borderallseven {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 600px;
  text-align: center;
  line-height: 600px;
}
.borderalleight {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 170px;
  text-align: center;
  line-height: 170px;
}
.borderallnine {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 150px;
  text-align: center;
  line-height: 150px;
}
.borderallten {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  text-align: center;
}
.borderallbig {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 120px;
  text-align: center;
  line-height: 120px;
}
.borderallheight {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 196px;
  text-align: center;
  line-height: 196px;
}
.borderallheights {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 112px;
  text-align: center;
  line-height: 112px;
}
.borderallheighta {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 420px;
  text-align: center;
  line-height: 420px;
}
.borderallheightb {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  color: #bebebe;
  height: 420px;
  text-align: center;
  line-height: 420px;
}
.borderallF {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 112px;
  text-align: center;
  line-height: 112px;
}
.borderallFS {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 112px;
  text-align: center;
  line-height: 112px;
}
.borderallT {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 84px;
  text-align: center;
  line-height: 84px;
}
.borderallTS {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 84px;
  text-align: center;
  line-height: 84px;
}
.borderallover {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 532px;
  text-align: center;
  line-height: 532px;
}
.borderallFF {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 140px;
  text-align: center;
  line-height: 140px;
}
.borderallS {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 196px;
  text-align: center;
  line-height: 196px;
}
.bordertop {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 22px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}
</style>

